<template>
  <a-list :bordered="false">
    <a-list-item
      v-for="item in GroupList"
      :key="item.wxid"
      :style="{ backgroundColor: selectedGroupWxid === item.wxid ? '#E8F3FF' : 'white' }"
      @click="handleGetInfo(item)"
    >
      <a-list-item-meta :title="item.nick">
        <template #avatar>
          <a-avatar shape="square" :trigger-icon-style="{ color: '#3491FA' }" v-if="item.avatarMaxUrl">
            <img alt="avatar" :src="item.avatarMaxUrl" />
          </a-avatar>
          <a-avatar shape="square" v-else>
            <icon-user-group />
          </a-avatar>
        </template>
      </a-list-item-meta>
    </a-list-item>
  </a-list>
  <div style="display: flex; justify-content: center; padding-top: 16px; padding-bottom: 16px;">
    <a-pagination
      :total="count"
      :page-size="pageSize"
      size="mini"
      simple
      :current="current"
      @change="changePage"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useGroupStore } from '@/store';
  import { Message } from '@arco-design/web-vue';
  import { getGroupList, getGroupInfo } from '@/api/weixin';

  const GroupStore = useGroupStore();
  const selectedGroupWxid = ref('')
  interface SearchForm {
    nick: string;
    issave: boolean | undefined;
  isauto: boolean | undefined;
    tags: string;
  }
  interface GroupItem {
    wxid: string;
    nick: string;
    avatarMaxUrl?: string;
  } 

  const props = defineProps<{
    selectedWxid: string;
    selectedAvatar: string;
    searchForm: SearchForm
  }>();

  const current = ref(1);
  const pageSize = ref(10);
  const count = ref(0);
  const loading = ref(false);

  const GroupList = ref<GroupItem[]>([]);
  // 搜索表单数据

  // 获取群列表数据
  const fetchGroupList = async (wxid: string) => {
    loading.value = true;
    try {
      const res: any = await getGroupList(wxid, {
        page: current.value,
        pageSize: pageSize.value,
        field: {
          nick: props.searchForm.nick,
          issave: props.searchForm.issave,
          tags: props.searchForm.tags,
          isauto: props.searchForm.isauto,
        },
      });
      if (res.code === 20000) {
        count.value = res.data.count;
        GroupList.value = res.data.list;
      } else {
        Message.error(res.msg || '获取好友列表失败');
      }
    } catch (error) {
      console.error('获取好友列表失败:', error);
    } finally {
      loading.value = false;
    }
  };

  const changePage = async (e: any) => {
    current.value = e;
    await fetchGroupList(props.selectedWxid);
  };

  const handleGetInfo = async (record: any) => {    
    try {
      const res: any = await getGroupInfo({
        mywxid: props.selectedWxid,
        wxid: record.wxid,
      });
      if (res.code === 20000) {
        // 保存到状态
        selectedGroupWxid.value = res.data.wxid;
        GroupStore.selectedGroup(res.data.wxid,res.data.avatarMaxUrl,res.data.nick,res.data.issave,res.data.isauto)
      } else {
        Message.error(res.msg || '获取微信信息失败');
      }
    } catch (error) {
      Message.error('获取微信信息失败');
    }
  };

  watch(
  () => props.selectedWxid,
  async (newWxid) => {
    if (newWxid) {
      await fetchGroupList(newWxid);
    }
  },
  { immediate: true }
);

  watch(
  () => props.searchForm,
  (newVal) => {
    if (props.selectedWxid && newVal) {
      fetchGroupList(props.selectedWxid);
    }
  },
  { deep: true, immediate: true }
);

</script>
